// 上面这个代码处理过度动画（默认加上不用管）
document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    document.body.classList.add("sidenav-pinned");
    document.body.classList.add("ready");
  }, 200);
});

// 每个页面都会导入该js 统一的设置写这里即可
function tip(msg) {
  // 1 保存dom元素
  const toastDom = document.querySelector("#myToast");
  // 2 创建 toast对象 轻提示
  const toast = new bootstrap.Toast(toastDom);
  // 2.5 需要提示信息
  document.querySelector(".toast-body").innerHTML = msg;
  // 3 弹出
  toast.show();
}
// tip("提示");
axios.defaults.baseURL = "http://ajax-api.itheima.net";

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    config.headers.Authorization = localStorage.getItem("num");
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    // 只要服务器返回的 http状态码是错误 就会执行到这里
    // 可以在这里对于请求的异常 统一判断,比如 token有问题
    // 如果有其他的异常也要统一处理可以继续编写类似的判断
    console.dir(error);
    if (error.request.status == 401) {
      localStorage.removeItem("num");
      localStorage.removeItem("names");
      //跳转页面
      window.location.href = "./login.html";
    }
    return Promise.reject(error);
  }
);

// 添加请求拦截器
// axios.interceptors.request.use(
//   // config(配置) 形参 可以改名字 定义函数时 形参
//   function (config) {
//     // 可以不可以把token的携带 也写在这里呢?
//     // headers是个对象,可以动态添加属性
//     config.headers.Authorization = localStorage.getItem('usertoken')
//     // 在发送请求之前做些什么
//     return config
//   },
//   function (error) {
//     // 对请求错误做些什么
//     return Promise.reject(error)
//   }
// )

// // 添加响应拦截器
// axios.interceptors.response.use(
//   // response(响应)  形参 可以改名字
//   function (response) {
//     // 2xx 范围内的状态码都会触发该函数。
//     // console.log('响应拦截器-成功部分的逻辑')
//     // console.log('response:', response)
//     // 人为的将 axios 包裹到数据上的 data属性 点掉
//     // 页面中 就不需要点2次data
//     // 对响应数据做点什么
//     return response.data
//   },
//   function (error) {
//     // 超出 2xx 范围的状态码都会触发该函数。
//     // 2xx以外的 基本都是异常
//     // 400 401 422 409 500....
//     console.log('响应拦截器-异常部分的逻辑')
//     // 只要服务器返回的 http状态码是错误 就会执行到这里
//     // 可以在这里对于请求的异常 统一判断,比如 token有问题
//     // 对响应错误做点什么
//     return Promise.reject(error)
//   }
// )

//信息
const username = localStorage.getItem("names");
const unseSpan = document.querySelector(
  "#navbar-main-collapse .font-weight-bold"
);
// console.log('nameSpan:', nameSpan)
// nameSpan存在 再赋值 nameSpan可以获取到 dom元素--布尔值 true
// if (nameSpan !== null) {
if (unseSpan != null) {
  unseSpan.innerHTML = username;
}

// 退出
const logout = document.querySelector("#logout");
// if判断实现
// if(logout){
// logout.onclick=function(){
// 删除保存的用户名 和 token
//   localStorage.removeItem('username')
//   localStorage.removeItem('token')
// 去登录页 js中 ./无法出现login.html
// 相对路径 以 js文件最终导入的页面为准
//   window.location.href='./login.html'
// }
// }

// 表达式1 为真 才会解析表达式2
// dom元素存在 才会去绑定事件
logout &&
  (logout.onclick = function () {
    // 删除保存的用户名 和 token
    localStorage.removeItem("username");
    localStorage.removeItem("usertoken");
    // 去登录页 js中 ./无法出现login.html
    // 相对路径 以 js文件最终导入的页面为准
    window.location.href = "./login.html";
  });
